import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';

import '../../lib_runtime/extension/string_extension/string_text.dart';
import '../../m_me/constants/me_assets_constants.dart';
import '../constants/room_assets.dart';

class RoomOnlineUser extends StatelessWidget {
  const RoomOnlineUser({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Container(
          alignment: AlignmentDirectional.center,
          height: 65.h,
          decoration: BoxDecoration(
              border: BorderDirectional(
                  bottom: BorderSide(
                      color: const Color(0xFFD8D8D8),
                      width: 0.5.w,
                      style: BorderStyle.solid))),
          child: Stack(
            alignment: Alignment.center,
            children: [
              Center(
                child: "online(99)".text(
                  fontSize: 20.sp,
                  color: const Color(0xFF1B1B1B),
                  weight: TextFontWeight.medium,
                ),
              ),
              PositionedDirectional(
                start: 15.w,
                child: Image.asset(
                  RoomAssets.roomOnlineUserCloseIcon,
                  width: 21.w,
                  height: 21.h,
                ),
              )
            ],
          ),
        ),
        _buildUserList(context),
      ],
    );
  }

  /// 用户列表
  Widget _buildUserList(BuildContext context) {
    return Expanded(
      child: ListView.separated(
          itemCount: 10,
          separatorBuilder: (context, index) {
            return Divider(
              color: const Color(0xFFD8D8D8),
              height: 0.5.h,
              thickness: 0.5.h,
              indent: 16,
              // 左侧缩进
              endIndent: 16, // 右侧缩进
            );
          },
          itemBuilder: (context, index) {
            return _buildUserItem(context);
          }),
    );
  }

  /// 用户列表项
  Widget _buildUserItem(BuildContext context) {
    return Container(
        height: 67.h,
        alignment: AlignmentDirectional.centerStart,
        padding: EdgeInsetsDirectional.only(start: 15.w),
        child: Row(
          children: [
            CircleAvatar(
              backgroundColor: Color(0xFFFFFFFF),
              radius: 20.r,
              backgroundImage: const CachedNetworkImageProvider(
                  'https://picsum.photos/200/300'),
              // 使用 NetworkImage
              child: true
                  ? Image.asset(MeAssetsConstants.iconEmpty) // 如果没有图片，显示加载动画
                  : null,
            ),
            SizedBox(width: 9.w),
            Column(
              mainAxisAlignment: MainAxisAlignment.center,
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Row(children: [
                  Image.asset(
                    RoomAssets.roomHomeownerIcon,
                    width: 18.w,
                    height: 18.h,
                  ),
                  Container(
                    width: 0.5.w,
                    height: 16.h,
                    color: const Color(0xFFD8D8D8),
                    margin: EdgeInsetsDirectional.only(start: 3.w, end: 5.w),
                  ),
                  "User Name".text(
                    fontSize: 18.sp,
                    color: Colors.black,
                    weight: TextFontWeight.medium,
                  )
                ]),
                Row(children: [
                  Image.asset(
                    RoomAssets.roomOnmic,
                    width: 10.w,
                    height: 14.h,
                  ),
                  SizedBox(width: 14.w,),
                  "Signature of the individual...".text(
                    fontSize: 11.sp,
                    color: const Color(0xFFC1C1C1),
                  )
                ]),
              ],
            ),
          ],
        ));
  }
}
